import React, { useEffect, useRef, useState } from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Button, Result } from 'antd';
import { ActionType } from '@ant-design/pro-components';
import { useAccess } from 'umi';
import { pageCuesTopic, pageCuesTopicInit } from '@/services/api/api-cues-topic';
import { parse } from '@/utils/historyUtils';
import ProList from '@ant-design/pro-list';
import TableTableTopicRenderDetails from './TableTopicRenderDetails';
interface TableIntelligentRecommendationProps {
    mode: number;
    loading: boolean;
    onRefurbish: () => void;
}
const App: React.FC<TableIntelligentRecommendationProps> = ({ mode, loading, onRefurbish }) => {
    const userRef = useRef<ActionType>();
    const userRefList = useRef<ActionType>();
    const [topicId, setTopicIdState] = useState()
    const access = useAccess();
    /**
      * 请求网络
      * @param value
      */
    const request = async (params = {}) => {
        const response = await pageCuesTopic({ pageSize: 12, current: 1, mode: mode, run: 1, createdSource: 3 });
        return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
        });
    };

    /**
 * 请求网络
 * @param value
 */
    const requestTable = async (params = {}, filter = {}) => {
        console.log(filter);
        const response = await pageCuesTopic({ ...params, mode: mode, ...queryParam, run: 2, createdSource: 3 });
        return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
        });
    };
    /**
    * 搜索参数
    */
    const [queryParam, setQueryParamState] = useState({});

    useEffect(() => {
        const { topicId } = parse(location.search) as { topicId: string };
        setTopicIdState(topicId);
    }, [])

    /**
  * 预备Tree结构数据
  * @param data
  */
    function readyTreeData(data: AdminOrganizationData.Organization[]): any {
        const treeData = new Array();
        if (data) {
            data.forEach((val) => {
                treeData.push({
                    label: val.name,
                    value: val.id,
                    key: val.id,
                    disabled: val.isFolder === 1 && val.isOrganization === 0 && val.children === undefined, children: readyTreeData(val.children as AdminOrganizationData.Organization[]),
                });
            });
        }
        return treeData;
    }
    /**
 * 查询单位
 */
    const [queryOrganizations, setQueryOrganizationsState] = useState<any>();

    /**
     * 加载 页面初始化信息
     * @param key
     */
    const loadPageCuesTopicInitData = async () => {
        try {
            const response = await pageCuesTopicInit({ mode: mode });
            if (response.code === 0) {
                setQueryOrganizationsState(readyTreeData(response.data.queryOrganizations));
            }
        } catch (error) { }
    };
    useEffect(() => {
        loadPageCuesTopicInitData();
    }, []);
    return (<>
        <ProList<CuesTopicData.TopicPage>
            header={false}
            headerTitle={false}
            ghost={true}
            // ghost={false}
            // itemCardProps={{
            //   ghost: false,
            // }}
            pagination={{
                defaultPageSize: 8,
                showSizeChanger: false,
                showTotal: false,
                style: { textAlign: 'center' },
            }}
            className='topicRender'
            style={{ marginTop: 10 }}
            actionRef={userRefList}
            request={request}
            showActions="hover"
            grid={{ gutter: 18, column: 1 }}
            onItem={(record: any) => {
                return {
                    onMouseEnter: () => { },
                    onClick: () => { },
                };
            }}
            renderItem={(item: CuesTopicData.TopicPage, index: number) => {
                return (
                    <TableTableTopicRenderDetails
                        topicId={topicId}
                        item={item}
                        onRefurbish={() => {
                            userRef.current?.reload();
                            userRefList.current?.reload();
                        }}
                        triggerMode="card"
                        title={item.name}
                    />
                );
            }}
            rowKey={'id'}
            toolBarRender={false}
        />
    </>)

};

export default App;